<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WuLiao - ECharts</title>

<!-- 引入jquery.js -->
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="static/js/echarts.min.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style=" height: 400px;"></div>

	<script type="text/javascript">
	var worldMapContainer = document.getElementById('main');
	//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        worldMapContainer.style.width = (window.innerWidth-30)+'px';
        worldMapContainer.style.height = (window.innerHeight-30)+'px';
    };
    //设置容器高宽
    resizeWorldMapContainer();
	var myChart = echarts.init(worldMapContainer);
		// 显示标题，图例和空的坐标轴
		var option = {
			title : {
				text : '物料库存'
			},
			tooltip : {},
			legend : {
				data : [ '数量' ]
			},
			xAxis : {
				data : []
			},
			yAxis : {},
			series : [ {
				name : '数量',
				type : 'bar',
				itemStyle:{
					normal:{
						color:'#5b9cd6'
					},
					emphasis:{
						
					}
				},
				data : []
			} ]
		};

		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

		var names = []; //编号数组（实际用来盛放X轴坐标值）
		var nums = []; //数量数组（实际用来盛放Y坐标值）
		
		function setValue(){
			$.ajax({
				type : "post",
				async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				url : "wuLiao/getWuLiaoData.do", //请求发送到TestServlet处
				data : {},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					//请求成功时执行该函数内容，result即为服务器返回的json对象
					if (result) {
						names.length = 0;
						nums.length = 0;
						//alert(result);
						for (var i = 0; i < result.length; i++) {
							names.push(result[i].code); //挨个取出类别并填入编号数组
						}
						for (var i = 0; i < result.length; i++) {
							nums.push(result[i].count); //挨个取出销量并填入数量数组
						}
						myChart.hideLoading(); //隐藏加载动画
						myChart.setOption({ //加载数据图表
							xAxis : {
								data : names
							},
							series : [ {
								// 根据名字对应到相应的系列
								name : '数量',
								data : nums,
								barWidth:'50%',//柱状图宽度
								markLine : {
									data : [
									//{name: '预警值',coord:[0,60]}	//coord[xaxis的值,yaxis的值]
									{
										name : '库存底线',
										value : 60,
										xAxis : -1,
										yAxis : 60//,
										//symbol : 'diamond'
									}, {
										name : '库存上线',
										value : 300,
										xAxis : -1,
										yAxis : 300
									} ]
								},
								//顶部数字展示pzr  
			                    itemStyle: {  
			                        normal: {  
			                            label: {  
			                                show: true,//是否展示  
			                                textStyle: {  
			                                    fontWeight:'bolder',  
			                                    fontSize : '12',  
			                                    fontFamily : '微软雅黑',  
			                                }  
			                            }  
			                        }  
			                    }
							} ]
						});

					}
					
				},
				error : function(errorMsg) {
					//请求失败时执行该函数
					alert("图表请求数据失败!");
					myChart.hideLoading();
				}
			})
			myChart.setOption(option);	//载入图表
		}
		setValue();
		setInterval(function () {
			setValue();
			//用于使chart自适应高度和宽度
	        window.onresize = function () {
	            //重置容器高宽
	            resizeWorldMapContainer();
	            myChart.resize();
	        }; 
		},15000)
	</script>


</body>
</html>